<template>
	<view class="position-relative">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="swipperConfig.indicatorDots"
				:autoplay="swipperConfig.autoplay" :interval="swipperConfig.interval"
				:duration="swipperConfig.duration">
				<swiper-item v-for="item in goods.photos" :key="index" @tap="onSwiperItemTap(item)">
					<view class="swiper-item h-100">
						<image :src="item" mode="scaleToFill" class="h-100 w-100"></image>

					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="p-3 border-bottom bg-white">
			<view class="d-flex a-center ">
				<text class="text-2xl font-md font-theme-color">秒杀价:1499</text>
				<text class="ml-2 font-sm text-grey line-through">市场价:1999</text>
			</view>
			<view class="text-dark mt-2 font-md">
				<text>飞天茅台</text>
			</view>
			<view class="mt-2">
				<uni-tag text="原装正品" :inverted="true" class="ml-2">
				</uni-tag>
				<uni-tag text="假一赔十" :inverted="false">
				</uni-tag>
			</view>
		</view>
		<view class="p-2 bg-white font-sm text-grey">
			全场包邮七天无理由退货

		</view>
		<view class="mt-2 p-2 bg-white font-sm text-grey" style="padding-bottom: 100rpx;">
			<view class="font-md text-dark p-2">
				商品详情
			</view>
			<view class="mt-2">
				<uv-parse :content="goods.detail" :selectable="true" :tagStyle="{ img: 'display:block;' }"></uv-parse>

			</view>
		</view>
		<view class="position-fixed left-0 right-0 bottom-0">
			<uni-goods-nav :fill="true" :options="cartOptions" :button-group="customButtonGroup"
				@click="onGoodsNavOptionClick" @buttonClick="onGoodsNavButtonClick" />
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<scroll-view scroll-y style="height:700rpx;" class="bg-white">
				<view class="p-2 bordor-bottom text-right">
					<uni-icons type="closeempty" size="20" @click="popup.close()"></uni-icons>
				</view>
				<uni-list>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="{
						type: 'location', color: '#007aff', size: '24'}" 
						:title="currentAddress" @click="chooseAddress" link/>
				</uni-list>
				<view class="d-flex mt-2">
					<view style="width: 176rpx;height: 175rpx;">
						<image :src="goods.photos[0]" mode="scaleToFill" class="h-100 w-100"></image>
					</view>
					<view class="flex-1 ml-2 d-flex flex-column j-sb">

						<view class="font-md text-dark">
							飞天茅台 500ml贵州茅台酒(带杯)白酒酒水
						</view>
						<uni-section title="设置最小值和最大值" subTitle="使用 min \ max 属性设置最大最小值" type="line" padding>
							<uni-number-box :min="1" :max="9"  />
						</uni-section>
					</view>
				</view>
			</scroll-view>
			<view class="p-2 bg-white positon-fixed left-0 right-0 bottom-0">
				<button type="warn" class="w-full h-100 rounded-0 border-0">立即抢购 ￥1999</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
defineOptions({
	name: 'Goods',
})
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const currentAddress=ref('张三,18899990000,北京市草原去百家装')


onLoad((options) => {
	console.log(options)
	if (options.id) {
		// getGoodsDetail(options.id)
		// console.log(options.id)
	}
	uni.$on('choose-address',(params)=>{
		const address=params.address
		currentAddress.value=address.realname+", "+address.phone+", "+address.region+', '+address.detail

	})

})
const cartOptions = ref([
	{
		icon: 'chat',
		text: '咨询'

	},
	{
		icon: 'shop',
		text: '项目',
		infoBackgroundColor: '#007aff',
		infoColor: "#f5f5f5"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 2
	}
])
const customButtonGroup = [
	{
		icon: 'uni-icon-plus',
		text: '立刻抢购',
		backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
		color: '#fff'
	},
]
const onGoodsNavButtonClick = (e) => {
	popup.value.open()

}
const onGoodsNavOptionClick = (e) => {
	uni.showToast({
		title: e.content.text,
		icon: 'none'
	})

}


const swipperConfig = ref({
	indicatorDots: true,
	autoplay: true,
	interval: 3000,
	duration: 1000
})


const goods = reactive({
	id: '1',
	title: '飞天茅台',
	photos: ['/static/product/goods1.jpg', '/static/product/goods2.jpg', '/static/product/goods3.jpg'],
	detail: '<p>飞天茅台，是中国酒界的骄傲，也是中国酒界的荣誉。</p><p>飞天茅台，是中国酒界的骄傲，也是中国酒界的荣誉。</p><p>飞天茅台，是中国酒界的骄傲，也是中国酒界的荣誉。</p><p>飞天茅台，是中国酒界的骄傲，也是中国酒界的荣誉。</p>'

})

const popup = ref(null)


const onSwiperItemTap = (index) => {
	uni.previewImage({
		urls: goods.photos,
		current: index,
		indicator: "number",
		loop: true
	})

}
const chooseAddress=()=>{
	uni.navigateTo({
		url: '/pages/address/address?from=seckill',

	})
}


</script>

<style scoped lang="scss">
.swiper {
	height: 750rpx;
}
</style>
